<template>
	<view class="pages-card">
		<view class="order-item-center ">
			<view class="goods-list">
				<view class="row-box goods-item ">
					<image class="goods-img mr-20" :src="info.image" mode="scaleToFill"></image>
					<view class="info-box flex-1">
						<view class="fs-lg fc-0 fw-6">
							{{info.name}}
						</view>
						<view class="flex align-items-center" v-if="info.min_activity_price">
							￥{{info.min_activity_price}} ~ ￥{{info.max_activity_price}}
						</view>
						<view class="row-box">
							<view class="fs-sm" v-if='info.subname'>
								{{info.subname}}
							</view>
							<view class="price-box" v-if="info.min_price">
								<view class="fc-ac">
									￥{{info.min_price}}
								</view>
								<view class="fc-0 fs-sm old-price">
									￥{{info.max_price}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="row-box mt-10 mb-20">
					<rich-text class="rich-text" :nodes="info.content"></rich-text>
				</view>
				<view class="row-box mt-10 mb-20">
					<swiper class="swiper" circular autoplay vertical :interval="3000"
						v-if="info.banner_list&&info.banner_list.length">
						<swiper-item v-for="(item,index) in info.banner_list" :key="index">
							<view class="swiper-item flex align-items-center">
								<image class="avatar mr-10" :src="item.avatar" mode="scaleToFill"></image>
								{{item.name}}分享获得<text class="fc-warn">¥{{item.price}}</text>
							</view>
						</swiper-item>
					</swiper>
					<view class="swiper" v-else>

					</view>
					<view class="flex align-items-center justify-content-end">
						<view class=" btn-info btn-info-green " @click="share">
							分享顾客
						</view>
					</view>
				</view>

			</view>
		</view>
		<!-- 分享佣金 -->
		<view class="order-item-bottom pt-20 ">
			<view class="">
				<view class="flex align-items-center">
					<image class="icon mr-10" src="/static/images/common/income-1.png" mode="scaleToFill"></image>
					<text class="fc-0 ">预估佣金 </text>
					<text
						class="fc-ac  ml-10 mr-10">¥{{info.max_activity_commission?info.max_activity_commission:info.max_goods_commission}}元</text>
					<p-help></p-help>
				</view>
			</view>
			<view class="flex" v-if="info.max_activity_commission_info&&info.max_activity_commission_info.length">
				<image class="icon mr-10" style="flex-shrink: 0;" src="/static/images/common/income-2.png"
					mode="scaleToFill"></image>
				<view class="flex align-items-center" style="flex-wrap: wrap;">
					<view class="flex align-items-center mr-20 "
						v-for="(item,index) in info.max_activity_commission_info" :key="index">
						<text class="fc-0 ">{{item.type_name}} </text>
						<text class="fc-ac ml-10 mr-10">¥{{item.value}}元</text>
					</view>
				</view>
			</view>
			<view class="flex" v-if="info.max_goods_commission_info&&info.max_goods_commission_info.length">
				<image class="icon mr-10" style="flex-shrink: 0;" src="/static/images/common/income-2.png"
					mode="scaleToFill"></image>
				<view class="flex align-items-center" style="flex-wrap: wrap;">
					<view class="flex align-items-center mr-20 " v-for="(item,index) in info.max_goods_commission_info"
						:key="index">
						<text class="fc-0 ">{{item.type_name}} </text>
						<text class="fc-ac ml-10 mr-10">¥{{item.value}}元</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			},
			earn: {
				type: Array,
				default: () => {
					return []
				}
			},
			// 顶级分类:0-接龙 1-电商 2-社区团购 3-本地生活
			activity_type: {
				type: String | Number,
				default: () => {
					return 0
				}
			},
		},
		created() {},
		methods: {
			// 去详情页面
			share() {
				this.$emit('share', {
					title: this.info.share_name, //分享名称
					imgUrl: this.info.share_image, //分享图片,方图
					desc: this.info.share_content, //分享描述
					link: this.info.share_url, //分享链接
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tag {
		font-size: 24rpx;
		color: #999;
		padding: 6rpx 12rpx;
		border-radius: 10rpx;
		background-color: #f5f5f5;
		margin: 0 4rpx;
	}

	.tag-green {
		color: #00A191;
		background-color: #E8FFFC;
	}

	.tag-orange {
		color: #D49B07;
		background-color: #FFF6E9;
	}

	.tag-red {
		color: #EE3227;
		background-color: #FFEEED;
	}

	.tag-blue {
		color: #257DFF;
		background-color: #EAF6FF;
	}

	.pages-card {
		margin: 0 auto 20rpx;
	}

	.order-item-top {
		position: relative;
		border-bottom: 1rpx solid #ededeb;

		.order-item-top-img {
			width: 88rpx;
			height: 88rpx;
			position: absolute;
			z-index: 1;
			top: -30rpx;
			right: -30rpx;
		}

		.nickname {
			width: 340rpx;
		}

		.name {
			max-width: 140rpx;
		}


		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			overflow: hidden;
			flex-shrink: 0;
		}
	}

	.btn-info {
		width: 144rpx;
		line-height: 56rpx;
		font-size: 28rpx;
		background-color: #FFF;
		border: 1rpx solid #666;
		color: #666;
	}

	.btn-info-green {
		border: 1rpx solid #00A191;
		color: #00A191;
	}

	.order-item-center {
		.goods-item {
			.goods-img {
				width: 130rpx;
				height: 130rpx;
				border-radius: 10rpx;
				overflow: hidden;
				flex-direction: 0;
			}

			.info-box {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				min-height: 130rpx;
			}
		}


		.price-box {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			justify-content: center;
		}
	}

	.order-item-bottom {
		border-top: 1rpx solid #ededeb;

		.icon {
			width: 32rpx;
			height: 32rpx;
		}

	}

	/* 富文本容器中的图片样式 */
	.rich-text {
		width: 100% !important;
		max-width: 750rpx !important;

		img {
			width: 100% !important;
			display: none;
		}
	}

	.swiper {
		width: 500rpx;
		height: 60rpx;
		overflow: hidden;

		.swiper-item {
			width: 100%;
			height: 100%;

			.avatar {
				width: 56rpx;
				height: 56rpx;
				border-radius: 50%;
			}
		}
	}
</style>